<extend name="layout/edit" />

<block name="HEADER">
    <style type="text/css">
    	.xw-form .layui-card{
    	    margin-bottom: 0;
    	}
    </style>
</block>

<block name="CONTENT">
    
    <php>
        use app\admin\service\Security as SecurityService;
        use auth\GoogleAuth;
        
        $userId = request()->userId;
        $name = '运营平台('.$userId.")";
        $security = (new SecurityService)->getInfo(0, $userId ) ?: [];
        if( !$security['is_google_auth_bind']  ){
            $googleAuth = GoogleAuth::instance()->getQRCode( $name );
        }
    </php>
   
    <div class="xw-form">
        <div style="overflow: auto;width: 100%;height: calc(100% - 42px);">
           
           <div class="layui-card bandStatus">
                <div class="layui-card-header">
                    <span class="layui-badge layui-bg-cyan">第一步：下载Google身份验证APP</span>
                </div>
                <div class="layui-card-body">
                    <if $security['is_google_auth_bind'] >
                        <div id="yesBind">
                            <div class="layui-row">
                                <div class="layui-col-xs12 layui-col-md8">
                                    <span>已绑定: 您已绑定谷歌验证</span>
                                    <div>手机客户端下载地址: <a href="http://shouji.baidu.com/software/item?docid=22417419&amp;from=as" style="text-decoration:underline" target="_blank">Android</a> / <a href="https://itunes.apple.com/cn/app/google-authenticator/id388497605?mt=8" style="text-decoration:underline" target="_blank">IOS</a></div>
                                </div>
                            </div>
                        </div>
                    <else/>
                        <div id="noBind" >
                            <div class="layui-row">
                                <div class="layui-col-xs12 layui-col-md8">
                                    <span>未绑定: 您未绑定谷歌验证</span><br>
                                    <span style="color: orangered;">提示:为了您的资金安全,请尽快绑定谷歌验证码!</span>
                                    <div>手机客户端下载地址: <a href="http://shouji.baidu.com/software/item?docid=22417419&amp;from=as" style="text-decoration:underline" target="_blank">Android</a> / <a href="https://itunes.apple.com/cn/app/google-authenticator/id388497605?mt=8" style="text-decoration:underline" target="_blank">IOS</a></div>
                                </div>
                            </div>
                        </div>
                    </if>    
                </div>
            </div>
            
            <if !$security['is_google_auth_bind'] >
                <div class="layui-card bandStatus">
                    <div class="layui-card-header">
                        <span class="layui-badge layui-bg-cyan">
                            第二步：在Google身份验证中添加秘钥，获取授权码，使用Google身份验证器扫描下方二维码
                        </span>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-xs6">
                                <div style="background: #F2F2F2 url(/admins/images/loading-1.gif) no-repeat center;width: 200px;" >
                                    <img id="googleQrCode" src="{:$googleAuth['qr_code_url']}" height="200">
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div style="margin-top: 10%">
                                    扫描不了？使用手机号+秘钥获取<br>
                                    账号：<span id="phone">{:$name}</span><br>
                                    秘钥：<span id="googleKey">{:$googleAuth['secret']}</span><br><br>
                                    <span style="color: #cc0000;font-size: x-small">
                                        绑定成功后秘钥将不再展示，请自行备份保存。
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="layui-card">
                    <div class="layui-card-header">
                        <span class="layui-badge layui-bg-cyan">第三步：输入Google验证器中验证码</span>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div style="display: flex;">
                                <div style="width: 100px;line-height: 30px;">谷歌验证码:</div>
                                <input type="text"   id="googleAuthCode" name="code" lay-verify="required|number" placeholder="请输入谷歌验证码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
            </if>
            
            
            <if $security['is_google_auth_bind'] >
                <div class="layui-card">
                    <div class="layui-card-header">
                        <span class="layui-badge layui-bg-gray">登录设置</span>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-xs6 layui-col-md8">
                                <span id="loginSetTip">已设置: 仅登录密码验证 
                                    <if $security['is_google_auth_bind'] !=1 >
                                        <p style="color: orangered">
                                            提示：建议绑定谷歌验证，若没有绑定谷歌验证，出现资金问题，本平台恕不负责！
                                        </p>
                                    </if>
                                </span>
                            </div>
                            <div class="layui-col-xs6 layui-col-md4">
                                <a type="button" id="loginSetBtn" class="layui-btn layui-btn-sm">
                                    <i class="layui-icon layui-icon-util"></i>更换
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--<div class="layui-card">
                    <div class="layui-card-header">
                        <span class="layui-badge layui-bg-gray">支付设置</span>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-xs6 layui-col-md8">
                                <span id="paySetTip">已设置: 仅支付密码验证 
                                    <if $security['is_google_auth_bind'] !=1 >
                                        <p style="color: orangered">
                                            提示：建议绑定谷歌验证，若没有绑定谷歌验证，出现资金问题，本平台恕不负责！
                                        </p>
                                    </if>
                               </span>
                            </div>
                            <div class="layui-col-xs6 layui-col-md4">
                                <a type="button" id="paySetBtn" class="layui-btn layui-btn-sm">
                                    <i class="layui-icon layui-icon-util"></i>更换
                                </a>
                            </div>
                        </div>
                    </div>
                </div>-->
            </if>
            
        </div>
    
        <div class="xw-btnRow" style="text-align: right;">
            <if !$security['is_google_auth_bind'] >
                <button type="button" class="layui-btn layui-btn-sm" onclick="page.save()">绑定 </button>
            </if>
            <button type="button" class="layui-btn layui-btn-sm"  onclick="$.close()" >关闭 </button>
        </div>
        
    </div>
    
</block>

<block name="FOOTER">
	<script type="text/javascript">
		var page = (function(ns){
        
            //页面初始化
            ns.init = function(){
                $("#loginSetBtn").click(function(){
                    var filter = {
                        url: $.getModule('login'),
                        oid:"{:$userId}",
                        mode: 2
                    }
                    $.openIframe(filter, "登录设置",['550px', '350px']);
                });
                //支付设置
                $("#paySetBtn").click(function(){
                    var filter = {
                        url: $.getModule('pay'),
                        oid:"{:$userId}",
                        mode: 2
                    }
                    $.openIframe(filter, "支付设置",['550px', '350px']);
                });
            }
            
            //保存
            ns.save=function(){
                var code = $("#googleAuthCode").val();
                if(!code) return $.toast(0,'请输入谷歌验证码！');
                $.ajaxs("/admin/v1/security/bindGoogleCode",{
                    code:code,
                    secret: $("#googleKey").text()
                }).then(function(){
                    $.toast(1,'成功绑定!');
                    window.location.href = window.location.href;
                });
            }
		    
		    return ns;
		}({}));
		
		
		$(function(){ page.init();  });

	</script>
</block>